<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 300px;
            height: 500px;
            background-color: red;
            display: none;
        }
        
        .header {
            width: 100%;
            height: 100px;
            background: #d70400 url('https://image1.suning.cn/uimg/cms/img/160490943807818124.jpg') no-repeat center;
        }
        
        .header em {
            font-style: normal;
            color: #fff;
        }
    </style>
</head>

<body>
    <!-- 
        <button>显示隐藏</button>
        <div class="box"></div> 
    -->

    <div class="header">
        <span>离广告关闭还剩<em>5</em>秒</span>
    </div>


</body>

</html>
<script>
    //1.显示隐藏盒子
    //获取元素对象
    // var btn = document.querySelector('button');
    // var box = document.querySelector('.box');

    //btn添加事件
    //css属性词不适合做条件。
    //box.style.display:获取css属性值，仅能获取行内样式的值。

    // var flag = true; //开关思维
    // btn.onclick = function() {
    //     if (flag) { //flag = true
    //         box.style.display = 'block'; //设置css属性值。
    //         flag = false;
    //     } else {
    //         box.style.display = 'none'; //设置css属性值。
    //         flag = true;
    //     }
    // };

    //2.广告弹出窗自动关闭+添加倒计时效果
    var header = document.querySelector('.header');
    var em = document.querySelector('.header em');
    //通过定时器完成
    var timer = setInterval(function() {
        var num = em.innerHTML; //获取数字5
        num--;
        //判断num等于0关闭header盒子，同时关闭定时器。
        if (num === 0) {
            header.style.display = 'none';
            clearInterval(timer); //关闭定时器。
        }
        em.innerHTML = num; //设置回去
    }, 1000);
</script>